<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="css/common.css" type="text/css" />
	<link rel="stylesheet" href="css/chico-min-0.11.css">
	<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
	<script type="text/javascript" language="javascript" src="js/core/core.js"></script>
	<script type="text/javascript" language="javascript" src="js/widget/grid.js"></script>
	<style>
		#man_zone {
			height: 550px;
			width: 99%;
			border: 1px solid #B4C9C6;
			margin: 6px 0 0 -10px;
			background-color:#FFFFFF;
			padding: 5px 0 5px 20px;
			overflow: auto;
		}
		
		td{
			color : #0637B3 ;
		}
		
		#infoList{
			border : 0px ;
		}
	</style>
	<title>管理区域</title>
</head>

<body>
	<div id="man_zone">
		<div id="infoList" class="ch-box-lite" >
			<table id="infoGrid" class="ch-datagrid" summary="Listado de cobros en MercadoPago">
				<caption>
					<p>
						<!-- buttons Area -->
						<button class="ch-btn-skin ch-btn-small" id="doHighlight">Add a new row</button>
						<button class="ch-btn-skin ch-btn-small" id="modalBtn">Clean Grid </button>
						<button class="ch-btn-skin ch-btn-small" id="btnTest">Blink the paragraph</button>
					</p>
				</caption>
				<thead>
					<tr>
						<th scope="col"><input type="checkbox" name="mycheckall"/></th>
						<th scope="col" id="factoryAddress">factoryAddress</th>
						<th scope="col" id="factoryId">factoryId</th>
						<th scope="col" id="factoryManager">factoryManager</th>
						<th scope="col" id="factoryName">factoryName</th>
						<th scope="col" id="factorySize" class="ch-datagrid-selected">factorySize <span class="ch-datagrid-desc">(desc)</span></th>
						<th scope="col" id="factoryStatus">factoryStatus</th>
						<th scope="col" id="factoryTel">factoryTel</th>
						<th scope="col" id="factoryType">factoryType</th>
						<th scope="col" id="factoryWeb">factoryWeb</th>
						<th scope="col" id="factoryZip">factoryZip</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td scope="row"><input type="checkbox" name="mycheck"/></td>
						<td>02/04/2011</td>
						<td><a href="#">Sale</a></td>
						<td><a href="#">mail@example.com</a></td>
						<td>Shopping at MercadoLibre</td>
						<td><span class="value">$1200,30</span></td>
						<td>Pending</td>
						<td>select	
						</td>
					</tr>
				</tbody>
			</table>
			<ul class="ch-pagination">
				<li><a type="prev" href="#">上一页</a></li>
				<li  class="ch-pagination-current"><a href="#">1</a></li>
				<li><a type="next" href="#">下一页</a></li>
			</ul>
		</div>
	</div>
	
	<!-- add windows -->
	
	<div id="winForm" class="ch-hide">
		<h1>新增信息</h1>
		<p>as大苏打. Curabitur dui velit, cursus in sagittis aliquam, dictum at neque. Ut gravida scelerisque lorem non pulvinar. Pellentesque et urna vitae nisl porta imperdiet sed nec ipsum. Sed non sem velit. Cras id consectetur tellus.</p>
	</div>
	<script src="js/chico-0.11.js"></script>
	<script language="javascript">

		$("#infoGrid").grid();	
	
		$("#doHighlight").on("click", function(){
			/*
			$("#infoGrid").grid().addRow({
				"index1" : "1111",
				"index2" : "2222",
				"index3" : "3333",
				"index4" : "4444",
				"index5" : "5555",
				"index6" : "666",
				"index7" : "777"
			});
			*/
		});
		
		window.reLoadGrid = function(pn){
			$("#infoGrid").grid({
				url : "/factory/indexpage.htm",
				data : {pageNum : pn} //"k1=v1&k2=v2"
			});
		};
		
		$("#modalBtn").on("click", function(){
			$("#infoGrid").grid().clean();
		});

		$("#btnTest").on("click" , function(){
			window.reLoadGrid(1);
		});
		
		//var testmModal = $("#btnTest").modal("#winForm");
		
		/*
		$(".ch-pagination").pag({
			total : 30 ,
			pageNum : 2,
			pageSize : 9
		});
		*/
		//must be imp window.reLoadGrid
		//
	</script>
</body>
</html>
